<template>
  <div class="card">
    <dv-border-box-11 title="传播质效" :color="['#168BF9', '#112F7C']">
      <!-- Element UI 单选按钮组 -->
      <div class="content-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          class="dark-blue-table"
        >
          <el-table-column label="平台" width="140" align="left">
            <template #default="{ row }">
              <div style="display: flex; align-items: center">
                <img
                  :src="getPlatformIcon(row.pt)"
                  :alt="row.pt"
                  class="platform-icon"
                />
                <div>{{ row.pt }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="zh"
            label="账号名称"
            width="170"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="score" label="得分" width="80">
          </el-table-column>
          <el-table-column prop="sort" label="排名" width="80">
          </el-table-column>
        </el-table>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
export default {
  data() {
    return {
      activeTab: "central",
      tableData: [],
      // 固定平台配置
      fixedPlatforms: [
        { pt: "微信公众号", icon: "wechat-public" },
        { pt: "微信视频号", icon: "wechat-video" },
        { pt: "微博", icon: "weibo" },
        { pt: "抖音", icon: "douyin" },
        { pt: "今日头条", icon: "toutiao" },
      ],
      // 平台图标映射
      platformIcons: {
        微信公众号: require("@/assets/img/platform/wechat-public.png"),
        微信视频号: require("@/assets/img/platform/wechat-video.png"),
        微博: require("@/assets/img/platform/weibo.png"),
        抖音: require("@/assets/img/platform/douyin.png"),
        今日头条: require("@/assets/img/platform/toutiao.png"),
      },
    };
  },
  created() {
    this.loadTableData();
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      currentPOST("rightBottomRankHome", {
        beginOfDay: "2025-09-29",
        endOfDay: "2025-10-05",
      })
        .then((res) => {
          if (res.code === 0) {
            this.processApiData(res.data);
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("传播质效数据请求失败:", error);
        });
    },

    // 处理API返回的数据，确保包含所有固定平台
    processApiData(apiData) {
      if (!apiData || !Array.isArray(apiData)) {
        console.warn("传播质效数据格式不正确");
        this.loadTableData(); // 加载默认数据
        return;
      }

      // 将API数据与固定平台合并
      this.tableData = this.fixedPlatforms.map((platform) => {
        const apiItem = apiData.find((item) => item.channel === platform.pt);
        if (apiItem) {
          // 映射字段：channel -> pt, source -> zh, rankScore -> score, rankIndex -> sort
          return {
            pt: apiItem.channel,
            zh: apiItem.source,
            score: apiItem.rankScore,
            sort: apiItem.rankIndex,
            // 保留其他可能需要的数据
            dataReadCount: apiItem.dataReadCount,
            dataLikeCount: apiItem.dataLikeCount,
            dataRttCount: apiItem.dataRttCount,
            articleCount: apiItem.articleCount,
          };
        } else {
          // 如果API数据中没有这个平台，创建默认数据
          return {
            pt: platform.pt,
            zh: "暂无数据",
            score: "0",
            sort: "-",
          };
        }
      });
    },

    // 获取平台图标
    getPlatformIcon(platformName) {
      return this.platformIcons[platformName] || this.getDefaultIcon();
    },

    // 默认图标（如果找不到对应图标）
    getDefaultIcon() {
      // 可以设置一个默认图标
      return require("@/assets/img/platform/default.png");
    },

    // Tab切换处理
    handleTabChange() {
      this.loadTableData();
      this.fetchDataByTab(this.activeTab);
    },

    // 根据tab加载表格数据（默认数据）
    loadTableData() {
      // 如果没有API数据，显示默认数据
      if (this.tableData.length === 0) {
        this.tableData = this.fixedPlatforms.map((platform) => ({
          pt: platform.pt,
          zh: "加载中...",
          score: "0",
          sort: "-",
        }));
      }
    },

    // 根据tab类型获取数据
    fetchDataByTab(tabType) {
      const params = {
        mediaType: tabType,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  margin-top: 30px;
  height: 350px;
  display: flex;
  justify-content: center;
}
.content-container {
  height: calc(100% - 80px);
  padding: 30px;
  padding-top: 60px;
}
.radio-container {
  display: flex;
  padding-block: 20px;
}

// 表格样式修改
::v-deep .dark-blue-table {
  // 增加行高
  .el-table__body {
    .el-table__row {
      height: 30px !important; // 增加行高

      td {
        padding: 12px 0; // 增加单元格内边距
        border-bottom: 1px solid #1e3a5f; // 改为蓝色分隔线
      }
    }
  }
}

.platform-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
</style>
